<template>
  <div class="carInfoItem flex-row flex-vertical-center">
    <vue-img :src="data.img.split(',')[0]" class="pic"></vue-img>
    <div class="info flex-grow-limit">
      <div class="row-1 text-limit">
        <div class="name">{{ data.car_manuf.name  + ' ' + data.car_series.name }}</div>
        <img src="@img/btn/more.png" class="moreBtn" v-if="visibleMoreBtn"
        @click.capture="$emit('clickMore', $event, data.id)">
      </div>

      <div class="row-2">
        <div class="license_at" >上牌时间：{{ data.license_at | nian_yue_ri }}</div>
        <div class="com-bao_guo_hu" v-if="data.is_transfer"></div>
      </div>

      <div class="row-3">
        <div class="price">{{ data.price === '0.00' ? '面议' : data.price + '万' }}</div>
        <div class="buyBtn" :class="{ disabled: !data.is_collect }">
          <span v-if="data.is_collect">我也想买</span>
          <span v-else>{{ data.consult_num }}人想买</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data', 'visibleMoreBtn'],

  filters: {
    nian_yue_ri (val){
      return val.replace(/^(\d{4})-(\d\d)-(\d\d)$/, '$1年$2月$3日')
    }
  },

  data (){
    return {

    }
  },

  computed: {
    user (){
      return this.data.user
    }
  },

  mounted (){

  },
}
</script>

<style lang="less" scoped>
.carInfoItem{
  height: 130px;
  padding: 10px;
  background-color: white;
  margin-top: 5px;
  border-radius: 10px;
  box-sizing: border-box;

  .pic{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    object-fit: cover;
  }

  .info{
    margin-left: 10px;
    height: 100px;
    flex-wrap: wrap;
    position: relative;

    > div[class^="row-"]{
      width: 100%;

      > div{
        display: inline-block;
      }
    }

    .license_at{
      font-size: 14px;
      color: @subtext;
    }
  }

  .row-3{
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .price{
    font-size: 18px;
    color: @danger;
    border-radius: 8px;
  }

  .buyBtn{
    float: right;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    .theme-btn;
    border-radius: 20px;
    font-size: 15px;

    &.disabled{
      opacity: 0.5;
    }
  }
}

.moreBtn{
  width: 24px;
  float: right;
}
</style>
